<template>
    <div id="body">
        <div class="tree">
            <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="Search" />
            <a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :tree-data="gData"
                @expand="onExpand">
                <template #title="{ title }">
                    <span v-if="title.indexOf(searchValue) > -1">
                        {{ title.substr(0, title.indexOf(searchValue)) }}
                        <span style="color: #f50">{{ searchValue }}</span>
                        {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                    </span>
                    <span v-else>{{ title }}</span>
                </template>
            </a-tree>
        </div>
        <div class="table">
            <a-table :columns="columns" :data-source="reserveData" :scroll="{ x: 1300, y: 532 }"
                :pagination="pagination" @change="pagination.change" :loading="loading">
                <template #bodyCell="{ column, text }">
                    <template v-if="column.dataIndex === 'name'">
                        <a>{{ text }}</a>
                    </template>
                </template>
            </a-table>
        </div>
    </div>
</template>
<script >
import {
    ref,
    reactive,
    defineEmits,
    onMounted,
    defineProps,
    defineComponent,
    computed,
    watch
} from "vue";
import { getPollTree, getPort, getShip } from "@/api/wash";

const x = 3;
const y = 2;
const z = 1;
const genData = [];
const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || '0';
  const tns = _tns || genData;
  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({
      title: key,
      key,
    });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
generateData(z);
const dataList = [];
const generateList = data => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const key = node.key;
    dataList.push({
      key,
      title: key,
    });
    if (node.children) {
      generateList(node.children);
    }
  }
};
generateList(genData);
const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};
export default defineComponent({
    setup() {
const table = {
    pageNum: 1,
    pageSize: 10
}
const portTable = {
    pageNum: 1,
    pageSize: 10
}
const shipTable = {
    pageNum: 1,
    pageSize: 10
}
const searchStr = ref('')
const searchValue = ref('')
const selectedKeys = ref([])
const checkedKeys = ref([])
const autoExpandParent = ref(false)
const backupsExpandedKeys = ref([])
const expandedKeys = ref([])
const replaceFields = { title: 'name' }
const onExpand = () => {

}
onMounted(() => {
    columns.value = portColumns
    getTree()
})
const onSearch = (value) => {
    console.log(treeData.value[0].children)
    const expanded = treeData.value[0].children.filter(item => {
        if (item.name.includes(value)) {
            return item
        }
        if (item.children) {
            // console.log(item.children)
            item.children.includes(value)
            return item
        }
        item.children.filter(item1 => {
            if (item1.name.includes(value)) {
                return item1
            }
            if (item1.children) {
                // console.log(item.children)
                item1.children.includes(value)
                return item1
            }
        })
    })
    console.log(expanded)
}
const loading = ref(false)
const pagination = reactive({
    current: table.pageNum,
    defaultPageSize: 10,
    showTotal: (total, range) => `共${total}条`,
    onShowSizeChange: (current, pageSize) => { table.pageSize = pageSize; table.pageNum = 1 },
    onChange: (pageNum) => {

        pagination.current = pageNum
    }

})
const columns = ref([])
const portColumns = [
    {
        title: "序号", key: "id", align: "center", width: 80, fixed: 'left'

    },
    { title: "码头名称", dataIndex: "wharfName", key: "wharfName", width: 180, ellipsis: true },
    { title: "初始蓝牙名称", dataIndex: "initialBluetoothName", key: 'initialBluetoothName', width: 150, ellipsis: true },
    { title: "蓝牙名称", dataIndex: "bluetoothName", key: 'bluetoothName', width: 100, ellipsis: true },
    { title: "蓝牙MAC", dataIndex: "macAddress", key: 'macAddress', width: 100, ellipsis: true },

    {
        title: "海事局", dataIndex: "orgName", key: "orgName", width: 150, ellipsis: true
    },
    { title: "泊位形式", dataIndex: "berthForm", key: "berthForm", width: 100, ellipsis: true },

    { title: "码头管理人", dataIndex: "personCharge", key: "personCharge", width: 120, ellipsis: true },

    { title: "联系电话", dataIndex: "phoneNumber", key: 'phoneNumber', width: 100, ellipsis: true },

    { title: "所属港口企业名称", dataIndex: "affiliatedUnit", key: 'affiliatedUnit', width: 150, ellipsis: true },


    { title: "航道里程", dataIndex: "channelMileage", key: "channelMileage", width: 100, ellipsis: true },
    { title: "左岸/右岸", dataIndex: "shoreside", key: 'shoreside', width: 150, ellipsis: true },

    { title: "经纬度", dataIndex: "longLatitude", key: 'longLatitude', width: 130, ellipsis: true },
    { title: "是否具备资质(备案情况)", dataIndex: "filingCertificate", key: "filingCertificate", width: 230, ellipsis: true },
    { title: "港航部门备案有效期截至日期", dataIndex: "validityFiling", key: "validityFiling", width: 230, ellipsis: true },
    { title: "备注", dataIndex: "remarks", key: 'remarks', width: 100, ellipsis: true },
]
const shipColumns = [
    {
        title: "序号", key: "id", align: "center", width: 80, fixed: 'left'

    },
    { title: "船舶识别号", dataIndex: "shipId", key: "shipId", width: 150, fixed: 'left' },

    {
        title: "船舶名称",
        dataIndex: "shipName",
        key: 'shipName',
        className: 'color',
        width: 150,

    },
    {
        title: "船舶MMSI", dataIndex: "shipMmsi", key: "shipMmsi", width: 150
    },
    { title: "初始蓝牙名称", dataIndex: "initialBluetoothBame", key: 'initialBluetoothBame', width: 150, ellipsis: true },

    { title: "蓝牙名称", dataIndex: "bluetoothName", key: "bluetoothName", width: 180, ellipsis: true },
    { title: "蓝牙MAC", dataIndex: "macAddress", key: "macAddress", width: 180, ellipsis: true },
    { title: "是否槽罐车转运", dataIndex: "carFlg", key: 'carFlg', width: 150, ellipsis: true },

    { title: "所属海事局", dataIndex: "orgName", key: "orgName", width: 150, ellipsis: true },

    { title: "单位名称", dataIndex: "affiliatedUnit", key: "affiliatedUnit", width: 180, ellipsis: true },
    { title: "联系人", dataIndex: "personCharge", key: "personCharge", width: 150, ellipsis: true },
    { title: "联系电话", dataIndex: "phoneNumber", key: "phoneNumber", width: 150, ellipsis: true },
    { title: "接收车辆数量", dataIndex: "numberVehiclesReceived", key: 'numberVehiclesReceived', width: 150 },
    { title: "港航部门备案编号", dataIndex: "filingNo", key: 'filingNo', width: 180, ellipsis: true },

    { title: "港航部门备案有效期截止日期", dataIndex: "validityFiling", key: 'validityFiling', width: 220, ellipsis: true },];
const reserveData = ref([])
const fieldNames = {
    children: 'children',
    title: 'name',
};
const treeData = ref([
]);
const getTree = () => {
    getPollTree().then(res => {
        // console.log(res.data.data)
        res.data.data.key = res.data.data.bjOrgCode
        let children = []
        res.data.data.children?.forEach((officeItem, index) => {
            let key = officeItem.bjOrgCode + '_' + officeItem.name
            officeItem.key = key
            officeItem.children?.forEach((classItem, index) => {
                let key = classItem.bjOrgCode + '_' + classItem.name
                // let key = classItem.name
                classItem.key = key
                classItem.children?.forEach((shipItem, index) => {
                    let key = shipItem.bjOrgCode + '_' + shipItem.name
                    shipItem.key = key
                })
            })
        });
        treeData.value.push(res.data.data)
        // console.log(res.data.data)
    })
}
// const treecheck = (value,data) => {
//     console.log(value,value.includes('接收船舶'),data,'选择')
//     if(data.node.children==null){
//         console.log(data,'选择')
//         console.log(data.node.name,'选择')
//         console.log(value,data.node.parent?.node.name, '选择')
//     }
// }
const select = (value, data) => {
    if (data.node.children == null) {
        console.log(data, '点击')
        console.log(data.node.name, '点击')
        console.log(data.node.parent?.node.name, '点击',)
        data.node.parent?.node.name.includes('接收船舶') ? getShipList(data.node.name) : getPortList(data.node.name)
    }
}

const getPortList = (value) => {
    loading.value = true
    columns.value = portColumns
    let obj = {
        wharfName: value,
        ...portTable
    }
    getPort(obj).then(res => {
        console.log(res, '码头')
        if (res.code == 200) {
            loading.value = false

            reserveData.value = res.data.data.list
            pagination.total = res.data.data.total
            // console.log(reserveData.value)
        }
    })
}
const getShipList = (value) => {
    loading.value = true
    columns.value = shipColumns
    let obj = {
        shipName: value,
        ...shipTable
    }
    getShip(obj).then(res => {
        console.log(res, '船舶')
        if (res.code == 200) {
            loading.value = false

            reserveData.value = res.data.pageInfo.list
            pagination.total = res.data.pageInfo.total
            // console.log(reserveData.value)
        }
    })
}
},
});
</script>
<style lang="scss" scoped>
#body {
    width: 55vw;
    height: 45vh;
    display: flex;

    // background-color: limegreen;
    .tree {
        margin-right: 10px;
        width: 250px;

        height: 45vh;
        overflow-y: scroll;
    }

    .table {

        // display: none;
        height: 100%;
        width: calc(100% - 250px);
    }

}

::v-deep .ant-tree {
    height: 100%;
    width: 100%;
    // overflow: scroll;
    // background-color: lightpink;
}

::v-deep .ant-table-body {
    &::-webkit-scrollbar {
        height: 10px;
        width: 10px;
        overflow-y: scroll;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #939392;
    }

    &::-webkit-scrollbar-track {
        -webkit-box-shadow: 0;
        border-radius: 0;
        background: #f0f2f5;
    }
}

::v-deep .tree {
    &::-webkit-scrollbar {
        height: 0px;
        width: 6px;
        overflow-y: scroll;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #939392;
    }

    &::-webkit-scrollbar-track {
        -webkit-box-shadow: 0;
        border-radius: 0;
        background: transparent;
        // background: #f0f2f5;
    }
}
</style>